import React from 'react';
import _ from 'underscore';

import View from 'lib/View.jsx';
import dispatcher from 'lib/dispatcher';
import DefaultErrorElement from 'lib/util/defaultErrorElement.jsx';
import DefaultNoDataElement from 'lib/util/defaultNoDataElement.jsx';
import DefaultLoadingElement from 'lib/util/defaultLoadingElement.jsx';

import DataFetcherView from './DataFetcherView.jsx';
import RequestSettingView from './RequestSettingView.jsx';
import InteractionSettingView from './InteractionSettingView.jsx';
import PackageListSettingView from './PackageListSettingView.jsx';
import AgentSettingFormXScope from './AgentSettingFormXScope.es6';

export default class AgentSettingFormX extends View {
  allPropertyChangingHandler(value, changes) {
    dispatcher.dispatch({
      $type: 'change_all_property',
      value,
      changes
    });
  } // allPropertyChangingHandler

  columnPropertyChangingHandler(key, value, changes) {
    dispatcher.dispatch({
      $type: 'change_column_property',
      key,
      value,
      changes
    });
  } // columnPropertyChangingHandler

  batchPropertyChangingHandler(keys, value, changes) {
    dispatcher.dispatch({
      $type: 'change_multi_property',
      keys,
      value,
      changes
    });
  } // batchPropertyChangingHandler

  propertyChangingHandler(keys, value, changes){
    dispatcher.dispatch({
      $type: 'change_property',
      keys,
      value,
      changes
    });
  } // propertyChangingHandler

  propertyChangedHandler(data) {
    dispatcher.dispatch({
      $type: 'reset_store',
      data
    });
  } // propertyChangedHandler

  cancelHandler() {
    dispatcher.dispatch({
      $type: 'cancel'
    });
  } // cancelHandler

  saveHandler() {
    dispatcher.dispatch({
      $type: 'save'
    });
  } // saveHandler

  editHandler() {
    dispatcher.dispatch({
      $type: 'edit'
    });
  } // editHandler

  renderLoading() {
    return (
      <div className="card">
        <table className="table table-striped">
          <tbody>
            <tr>
              <td>
                <DefaultLoadingElement height={ this.props.height } style={ this.props.defaultStyle } />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  } // renderLoading

  renderError() {
    return (
      <div className="card">
        <table className="table table-striped">
          <tbody>
            <tr>
              <td>
                <DefaultErrorElement height={ this.props.height } style={ this.props.defaultStyle } />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  } // renderError

  renderNoData() {
    return (
      <div className="card">
        <table className="table table-striped">
          <tbody>
            <tr>
              <td>
                <DefaultNoDataElement height={ this.props.height } style={ this.props.defaultStyle } />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  } // renderNoData

  renderButton() {
    if (this.state.isProcessing) {
      return (<span>保存中...</span>);
    }

    if (this.state.isEditing) {
      return [
        <button
          key="save"
          type="button"
          className="btn-green btn-xs"
          style={{ marginRight: 5 }}
          onClick={ this.saveHandler.bind(this) }>
          保存
        </button>,
        <button
          key="cancle"
          type="button"
          className="btn-gray btn-xs"
          onClick={ this.cancelHandler.bind(this) }>
          取消
        </button>
      ];
    }

    return (
      <button
        type="button"
        className="btn-blue btn-xs"
        onClick={ this.editHandler.bind(this) }>
        修改
      </button>
    );
  } // renderButton

  renderBody(data) {
    let request = data.getIn(['app', 'settings']).toJS();

    return (
      <div className="pure-g card">
        <div className="pure-u-1">
          <h5 className="card-title">
            <div className="float-right">{ this.renderButton() }</div>
            参数设置
          </h5>
        </div>
        <DataFetcherView
          allPropertyChanging={ this.allPropertyChangingHandler.bind(this) }
          columnPropertyChanging={ this.columnPropertyChangingHandler.bind(this) }
          batchPropertyChanging={ this.batchPropertyChangingHandler.bind(this) }
          propertyChanging={ this.propertyChangingHandler.bind(this) }
          isEditing={ this.state.isEditing }
          data={ data } />
        {
          !request['switch.http'] ? null : (
            <RequestSettingView
              appId={ data.getIn(['app', 'appId']) }
              appVersionId={ data.getIn(['app', 'appVersionId']) }
              propertyChanging={ this.propertyChangingHandler.bind(this) }
              isEditing={ this.state.isEditing }
              { ...request } />
          )
        }
        {
          !request['switch.activity'] ? null : (
            <InteractionSettingView
              appId={ data.getIn(['app', 'appId'])}
              appVersionId={ data.getIn(['app', 'appVersionId'])}
              propertyChanging={ this.propertyChangingHandler.bind(this) }
              isEditing={ this.state.isEditing }
              { ...request } />
          )
        }
        {
          BlueWare.isIOS || !request['switch.crash'] ? null : (
            <PackageListSettingView
              appId={ data.getIn(['app', 'appId']) }
              appVersionId={ data.getIn(['app', 'appVersionId']) }
              propertyChanging={ this.propertyChangingHandler.bind(this) }
              isEditing={ this.state.isEditing }
              tags={ request['setting.packages'] } />
          )
        }
      </div>
    );
  } // renderBody

  render() {
    if (this.state.store.loading) {
      return this.renderLoading();
    } else if (this.state.store.error) {
      return this.renderError();
    } else if (this.state.store.data) {
      if (this.state.store.data.count()) {
        return this.renderBody(this.state.store.data);
      } else {
        return this.renderNoData();
      }
    } else {
      return null;
    }
  } // render
}

AgentSettingFormX.defaultProps = {
  Scope: AgentSettingFormXScope
}
